<template>
  <ul class="list">
    <li v-for="item in reyinglist" :key="item.id">
      <!-- 添加跳转到 内容页的链接 -->
      <router-link :to="'/item/' + item.id">
        <div>
          <img :src="item.img" />
        </div>
      <div class="bb">
        <p class='dd'>
          {{ item.nm }}
        </p>
        <p class="ee">
         观众评分{{item.sc}}
        </p>
        <p class="ee">
         主演{{item.star}}
        </p>
        <p class="ll">
         {{item.showInfo}}
        </p>
        </div>
        <div >
           <div v-if="item.prsShow" class="ysbtn">预售</div>
            <div v-else class="cc">购票</div>
          </div>
          <div class="con-top">
		打开App
	</div>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: "reying",
  props: ["reyinglist"], //获取从父组件传过来的参数
};
</script>

<style scoped>
 .con-top{
    	box-sizing: border-box;
    	width:110px;
    	height:38px;
    	position:fixed;
    	right:0px;
    	bottom:120px;
    	background:#ff5269;
      color:#fff;
      line-height: 38px;
      text-align:center;
    }
.list li {
  width: 100%;
  height: 114px;
  margin-bottom: 10px;
}
.list li a {
  display: flex;
  justify-content: space-around;
  color: #333;
}
 .cc {
            width: 50px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            text-align: center;
            background-color: red;
            cursor: pointer;
margin-right: 20px;
        }
        .ysbtn {
            width: 50px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            text-align: center;
            background-color: #3c9fe6;
            cursor: pointer;
margin-right: 20px;
        }
        
        
        .dd {
            font-size: 18px;
            font-weight: 600;
        }
        
        .ee {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #666;
        }
        .ll{
           color: #666;
        }
        .list{
         padding-right: 5px;
         margin-left: 15px;
         overflow: hidden;
            border-bottom: 1px solid rgb(240, 234, 234);
        }
        .bb {
            margin-left: 20px;
            width: 250px;
            border-bottom: 1px solid rgb(240, 234, 234);
        }
</style>